<template>
  <div class="create">
    <div class="list_item mt20">
      <div class="item_title"><span class="title_icon"></span>时段{{ indexWel + 1 }}</div>
      <el-form ref="ruleFormRef" :model="formData" label-width="" class="formTime" :disabled="type === 'look'">
        <el-form-item label="发送周期：">
          <div class="form_week">
            <el-checkbox-group v-model="welContent.week" class="selectTime">
              <el-checkbox label="1">周一</el-checkbox>
              <el-checkbox label="2">周二</el-checkbox>
              <el-checkbox label="3">周三</el-checkbox>
              <el-checkbox label="4">周四</el-checkbox>
              <el-checkbox label="5">周五</el-checkbox>
              <el-checkbox label="6">周六</el-checkbox>
              <el-checkbox label="7">周日</el-checkbox>
            </el-checkbox-group>
            <div class="del_week_icon" @click="delWel(welContent)"></div>
          </div>
        </el-form-item>
        <el-form-item label="发送时间：">
          <div class="block">
            <el-time-picker value-format="HH:mm:ss" v-model="welContent.send_time" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
          </div>
        </el-form-item>
      </el-form>
      <div class="selectWel">
        <el-radio-group v-model="welContent.type">
          <el-radio :label="1">新建欢迎语</el-radio>
          <el-radio :label="2">默认欢迎语</el-radio>
          <el-radio :label="3">已有欢迎语</el-radio>
        </el-radio-group>
      </div>
      <div class="item_con item_message_box pad12" v-show="welContent.type != 2">
        <el-input class="item_con_input input_textarea" type="textarea" :rows="4" v-model="welContent.content" placeholder="请输入欢迎语" maxlength="1000" show-word-limit @input="changeWords" />
        <div class="simple_fn">
          <div class="cus_name" @click="insetName">插入客户昵称</div>
          <div class="sele_text" @click="openUpload('1')">选择文本</div>
          <div class="emoj" @click="emojiVisible = !emojiVisible">😊</div>
        </div>
        <el-scrollbar class="upload_list_box" max-height="105px">
          <ul class="upload_list">
            <li class="upload_item" v-for="item in newArr" :key="item.id">
              <img class="file_icon" :src="item.cur_icon" alt="" />
              <div class="file_name">{{ item.name }}</div>
              <img class="del_icon" @click="remove(item)" src="@/assets/image/channel/remove_icon.png" />
            </li>
          </ul>
        </el-scrollbar>
        <el-popover popper-class="pop_select_box" placement="top-start" trigger="hover" :width="360">
          <template v-if="Number(9 - fileList.length) > 0" #reference>
            <div class="upload_btn" v-show="welContent.type != 3">
              <el-icon class="addIcon">
                <plus />
              </el-icon>
              <span class="upload_text">添加图片/视频/音频/文件/链接/抽奖/收集表/电商</span>
            </div>
          </template>
          <template #default>
            <div class="upload_pop">
              <div class="item_pop" v-for="item in uploadList" :key="item.id" @click="openUpload(item.id)">
                <img class="item_pop_icon" :src="item.icon" alt="" />
                <span class="item_pop_name">{{ item.name }}</span>
              </div>
            </div>
          </template>
        </el-popover>
        <!-- 表情管理 -->
        <div class="emoj_box">
          <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
        </div>
      </div>
      <div class="already" v-show="welContent.type == 3" @click="already"> 选择已有欢迎语 </div>
    </div>

    <div class="prev_box">
      <div class="phone_con">
        <span class="phone-title">欢迎语预览</span>
        <el-scrollbar class="phone_List">
          <Friend :FriendDetail="fileList" />
        </el-scrollbar>
      </div>
    </div>
  </div>
  <!-- 标签弹框 -->
  <BatchLabel ref="BatchLabelRef" @save="getTagsFun" />
  <!-- 素材标签 -->
  <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getMaterlib" />
  <Dialog :appDialog="appDialog">
    <el-table :data="tableData" ref="multipleTable" stripe height="580" style="width: 100%" header-row-class-name="table_header_title" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="content" label="欢迎语" min-width="220">
        <template v-slot="scope">
          <span class="text">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="welcome_friend_attachment" min-width="200">
        <template v-slot="scope">
          <template v-for="v in scope.row.welcome_friend_attachment" :key="v.id">
            <!-- // 图片 -->
            <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 1">
              <el-image
                class="wel_content_file_item"
                :src="v.media_file.absolute_url || '/static/file/pic.png'"
                :preview-src-list="bigImgList"
                :preview-teleported="true"
                :initial-index="1"
                @click="BigImage(v.media_file.absolute_url)"
                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
              >
                <template #error>
                  <img style="width: 40px; height: 40px" src="/static/file/pic.png" alt="" />
                </template>
              </el-image>
            </el-tooltip>
            <!-- 视频 -->
            <el-tooltip :content="v.media_file.name" placement="top" effect="light" v-if="v.type === 2">
              <div class="pay-item">
                <div class="play"></div>
                <el-image class="wel_content_file_item" :src="v.media_file.absolute_url || '/static/file/pic.png'" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                  <template #error>
                    <el-image src="/static/file/mov.png" alt=""></el-image>
                  </template>
                </el-image>
              </div>
            </el-tooltip>
            <!-- 链接 -->
            <el-tooltip v-if="v.type === 3" :content="v.link_title || '暂无标题'" placement="top" effect="light">
              <img class="wel_content_file_item" src="/static/file/link.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
            <!-- 音频 -->
            <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 4">
              <img class="wel_content_file_item" src="/static/file/mp3.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
            <!-- 文件 -->
            <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 5">
              <img class="wel_content_file_item" :src="getSuffixIcon(v.media_file.name)" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="send_times" label="消息数量" width="125"> </el-table-column>
      <!-- 部门、员工 -->
      <el-table-column prop="depart" label="生效部门、员工" min-width="150">
        <template v-slot="scope">
          <div class="depart_main">
            {{ scope.row.department > 0 ? getSetionId('name', scope.row.department).join('、') : ' ' }}
            {{ scope.row.work_user.length > 0 ? getSetionId('name', scope.row.work_user).join('、') : '' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="创建人" min-width="150"></el-table-column>
      <el-table-column prop="user_local_department" label="所在部门" min-width="150">
        <template v-slot="scope">
          <span>{{ scope.row.user_local_department && scope.row.user_local_department.length > 0 ? getSetionId('name', scope.row.user_local_department).join('、') : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" min-width="200"></el-table-column>
      <el-table-column prop="updated_at" label="修改时间" min-width="200"></el-table-column>
      <template #empty>
        <el-empty :image-size="150" description="您还没有创建欢迎语">
          <template #image>
            <img src="/static/noBind.png" alt="" />
            <el-button type="primary" size="small" @click="router.push('/channel/qwbasicoperation/welcomefriend/addWelcomFriend')">创建欢迎语</el-button>
          </template>
        </el-empty>
      </template>
    </el-table>
    <ZWPagination ref="PaginationRef" @submit="getChannelFriendList" />
  </Dialog>
</template>

<script setup lang="ts">
  import { reactive, ref, defineProps, watch, onBeforeUnmount } from 'vue'
  import ZWEmoji from '@/components/ZWEmoji.vue'
  import ZWMatericalLib from '@/components/channel/ZWMatericalLibNew.vue'
  import ZWPagination from '@/components/ZWPagination.vue'

  import Friend from './Friend.vue'
  import Dialog from '@/components/Dialog.vue'

  import { getSuffixIcon, getSetionId, IsNotEmpty } from '@/utils/utils'
  import { channelFriendList } from '@/api/channel/qwbase'
  import router from '@/router'
  import { useStore } from '@/store'
  import bus from '@/utils/bus'
  import { ElMessage } from 'element-plus'

  const props = defineProps(['welContent', 'type', 'indexWel'])
  const emit = defineEmits(['delWel'])

  const store = useStore()
  const multipleTable = ref()
  const newArr = ref([])
  const uId = ref()
  const ZWMatericalLibRef = ref(null)
  const BatchLabelRef = ref(null)
  const emojiVisible = ref(false)
  const fileList = ref([])
  const fileList2 = ref([])
  const uploadList = reactive([
    { id: '2', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', icon: '/static/file/link.png', name: '链接' },
    { id: '8', icon: '/static/file/wbgg.png', name: '抽奖' },
    { id: '27', key: '7', icon: '/static/file/form.png', name: '收集表' },
    { id: '99', key: '8', icon: '/static/file/shop.png', name: '电商' }
  ])

  // from 表单收集的数据
  const formData = reactive({
    content: '', // 欢迎语文本
    week: [],
    start_time: '',
    end_time: '',
    selectWel: ''
  })
  const tableData = ref([]) //已有欢迎语数据
  const seleItem = ref() // 选中的欢迎语数据

  // 移除欢迎语
  const delWel = (data: any) => {
    emit('delWel', data)
  }
  // 处理欢迎语数据
  const dispose = () => {
    props.welContent.local_link = []
    props.welContent.local_content = []
    props.welContent.attachment = []
    props.welContent.retail_material = []
    props.welContent.collect_form = []
    props.welContent.activity = []
    fileList.value.forEach((item: any) => {
      console.log(item, 'UUUUUU')
      if (item.type != 1) {
        if (item.is_local) {
          if (item.type == 6) {
            props.welContent.local_link.push({
              link_title: item.title,
              link_url: item.link_url,
              link_decs: item.link_desc,
              link_share_image: item.cover_image_url
            })
          } else {
            props.welContent.local_content.push({
              code: item.code,
              type: item.type2
            })
          }
        } else {
          props.welContent.attachment.push({
            media_content_id: item.fromList ? item.content_id : item.id,
            // media_content_id: item.id,
            type: item.type2
          })
        }
      }
    })
  }
  bus.on('dispose', dispose)
  // 获取已有素材文件列表
  const getChannelFriendList = (data?: any) => {
    channelFriendList({
      page: 1,
      page_size: data?.page_size || 15,
      ...data
    }).then((res: any) => {
      tableData.value = res.data
      store.dispatch('pageTotal', res.total)
    })
  }
  // 选择已有素材取消
  const cancelHandel = () => {
    appDialog.visible = false
  }
  // 选择已有素材确认
  const submitHandel = () => {
    fileList.value = []
    fileList2.value = []
    newArr.value = []
    const { content } = seleItem.value
    props.welContent.content = content
    seleItem.value.welcome_friend_attachment.forEach((item: any) => {
      if (item.type !== 3) {
        if (item.type === 1) {
          item.media_file.cur_icon = '/static/file/pic.png'
          item.media_file.type = 2
          item.media_file.type2 = 1
          item.media_file.id = item.content_id
          // item.media_file.content_id = item.content_id
          // item.media_file.user_name = res.user_name
        }
        if (item.type === 2) {
          item.media_file.cur_icon = '/static/file/mov.png'
          item.media_file.thumbnail_url = `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
          item.media_file.type = 4
          item.media_file.type2 = 2
          item.media_file.id = item.content_id
          // item.media_file.content_id = item.content_id

          // item.media_file.user_name = res.user_name
        }
        if (item.type === 4) {
          item.media_file.cur_icon = '/static/file/mp3.png'
          item.media_file.type2 = 4
          item.media_file.type = 3
          item.media_file.id = item.content_id
          // item.media_file.content_id = item.content_id

          // item.media_file.user_name = res.user_name
        }
        if (item.type === 5) {
          let file = {
            type2: 5,
            type: 5,
            id: item.content_id,
            title: item.media_file.name,
            name: item.media_file.name,
            user_name: item.user_name,
            mediaFileInfo: {
              size: item.media_file?.size
            },
            cur_icon: url(item.media_file)
          }
          fileList.value.push(file)
          fileList2.value.push(file)
        }
        if (item.type != 5) {
          fileList.value.push(item.media_file)
          fileList2.value.push(item.media_file)
          newArr.value.push(item.media_file)
        }
      } else {
        let link = {
          name: item.link_title ? item.link_title : '',
          title: item.content_id == 0 ? (item.link_title ? item.link_title : '') : item.media_content_link ? item.media_content_link.link_title : '',
          cover_image_url: item.content_id == 0 ? item.link_share_image : item.media_content_link?.cover_image_url,
          link_decs: item.content_id == 0 ? item.link_decs : item.media_content_link ? item.media_content_link.content : '',
          cur_icon: '/static/file/link.png',
          link_url: item.content_id == 0 ? item.link_url : item.media_content_link ? item.media_content_link.ref_url : '',
          type: 6,
          type2: 3,
          id: item.content_id
          // content_id: item.content_id
        }
        fileList.value.push(link)
        fileList2.value.push(link)
        newArr.value.push(link)
      }
    })
    dispose()
    cancelHandel()
  }

  // 选择已有欢迎语
  const already = (data?: any) => {
    getChannelFriendList()
    appDialog.visible = true
  }
  // 单选欢迎语
  const handleSelectionChange = (selection: any) => {
    if (selection.length > 1) {
      multipleTable.value.clearSelection()
      multipleTable.value.toggleRowSelection(selection.pop())
    } else {
      seleItem.value = selection
    }
    seleItem.value = selection[0]
  }
  //表情包管理
  const chooseEmoji = (emoji: any) => {
    if (props.welContent.content.length >= 1000) {
      ElMessage.warning('字数已经超过规定最大字数')
      return
    }
    //事件。数据包含文本区域的值
    props.welContent.content = props.welContent.content + emoji
    emojiVisible.value = false
    fileList.value[0] = {
      type: 1,
      content: props.welContent.content
    }
  }
  // 删除上传的文件
  const remove = (data: any) => {
    if (props.type === 'look') return
    if (data.code) {
      fileList.value = fileList.value.filter((item: any) => item.code != data.code)
      newArr.value = newArr.value.filter((item: any) => item.code != data.code)
    } else {
      fileList.value = fileList.value.filter((item: any) => item.id != data.id)
      newArr.value = newArr.value.filter((item: any) => item.id != data.id)
    }
    fileList2.value = fileList.value
  }
  //打开上传文件弹框
  const openUpload = (num: string) => {
    if (props.type == 'look') return
    const showTabs = ['2', '4', '1', '3', '6', '8', '27', '99']
    ZWMatericalLibRef.value.showTabs = showTabs
    ZWMatericalLibRef.value.localUploadisShow= ['2','3','4','5','6']
    ZWMatericalLibRef.value.materVisible = true
    ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
    ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length) //打开对应的基础素材
    console.log(Number(9 - fileList.value.length), '上传搜索===fileList.value.length')
  }
  // 插入名字
  const insetName = () => {
    if (props.welContent.content.length >= 1000) {
      ElMessage.warning('字数已经超过规定最大字数')
      return
    }
    props.welContent.content += '##客户姓名## '
    fileList.value[0] = {
      type: 1,
      content: props.welContent.content
    }
  }
  //更改欢迎语
  const changeWords = () => {
    fileList.value[0] = {
      type: 1,
      content: props.welContent.content
    }
    console.log('嫦娥', fileList.value)
  }
  // 获取选择的信息
  const getMaterlib = (res?: any) => {
    // 文本
    if (res.type == 1) {
      if (props.welContent.content.length >= 1000) {
        ElMessage.warning('字数已经超过规定最大字数')
        return
      }
      props.welContent.content += res.data[0].content
      res.data.map((item: any) => {
        props.welContent.content += item.content
      })
      fileList.value[0] = {
        type: 1,
        content: props.welContent.content
      }
    } else {
      let result = []
      if (res.data.length > 0) {
        res.data.forEach((item: any) => {
          item.type = res.type
          result.push(item)
        })
      }
      if (res.local) {
        fileList.value = fileList.value.concat(changeLocalType(result))
      } else {
        fileList.value = fileList.value.concat(changeType(result))
      }
    }
    newArr.value = fileList.value.filter((item: any) => {
      return item.type != 1
    })
    props.welContent.local_link = []
    props.welContent.local_content = []
    props.welContent.attachment = []
    props.welContent.retail_material = []
    props.welContent.collect_form = []
    props.welContent.activity = []
    fileList.value.forEach((item: any) => {
      if (item.type != 1) {
        if (item.is_local) {
          if (item.type == 6) {
            props.welContent.local_link.push({
              link_title: item.title,
              link_url: item.link_url,
              link_decs: item.link_desc,
              link_share_image: item.cover_image_url
            })
          } else {
            props.welContent.local_content.push({
              code: item.code,
              type: item.type2
            })
          }
        } else {
          if (item.type == 7) {
            props.welContent.retail_material.push({ type: 7, id: item.id })
            // props.welContent.retail_material.push({ type: 8, id: item.id })
          } else if (item.type == 9) {
            props.welContent.collect_form.push({ type: 9, id: item.id })
          } else if (item.type == 8) {
            props.welContent.activity.push({
              type: 6,
              id: item.id
            })
          } else {
            props.welContent.attachment.push({
              media_content_id: item.id,
              type: item.type2
            })
          }
        }
      }
    })
  }
  // 转换本地上传的数据
  const changeLocalType = (data: any[]) => {
    let result = []
    if (data.length > 0) {
      data.forEach((item: any) => {
        // 图片
        if (item.type == 2) {
          item.cur_icon = '/static/file/pic.png'
          item.name = item.name
          item.title = item.name
          item.absolute_url = item.url
          item.type2 = 1
        }
        ///视频
        if (item.type == 4) {
          item.cur_icon = '/static/file/mov.png'
          item.name = item.name
          item.title = item.name
          item.type2 = 2
        }
        // 音频
        if (item.type == 3) {
          item.cur_icon = '/static/file/mp3.png'
          item.name = item.name
          item.title = item.name
          item.type2 = 4
        }
        // 链接
        if (item.type == 6) {
          item.cur_icon = '/static/file/link.png'
          item.name = item.title
          item.type2 = 3
        }
        // 文件
        if (item.type == 5) {
          item.cur_icon = getSuffixIcon(item.url)
          item.name = item.name
          item.title = item.name
          item.type2 = 5
        }
        item.is_local = true
        result.push(item)
      })
    }
    console.log(result, '-=-=-=-=-=e本地上传的信息')
    return result
  }
  // 转换选中信息
  const changeType = (data: any[]) => {
    let result = []
    if (data.length > 0) {
      data.forEach((item: any) => {
        // 图片
        if (item.type == 2) {
          item.cur_icon = '/static/file/pic.png'
          item.name = item.file_name
          item.type2 = 1
        }
        ///视频
        if (item.type == 4) {
          item.cur_icon = '/static/file/mov.png'
          item.name = item.file_name
          item.type2 = 2
        }
        // 音频
        if (item.type == 3) {
          item.cur_icon = '/static/file/mp3.png'
          item.name = item.file_name
          item.type2 = 4
        }
        // 链接
        if (item.type == 6) {
          item.cur_icon = '/static/file/link.png'
          item.name = item.title
          item.type2 = 3
        }
        // 文件
        if (item.type == 5) {
          item.cur_icon = getSuffixIcon(item.mediaFileInfo?.absolute_url)
          item.name = item.mediaFileInfo?.name
          item.type2 = 5
        }
        // 抽奖
        if (item.type == 8) {
          item.cur_icon = '/static/file/wbgg.png'
          item.name = item.activity_name
          item.type2 = 6
        } // 电商素材--电商产品
        if (item.type == 7) {
          item.cur_icon = '/static/file/shop.png'
          item.name = item.product_name
          item.type2 = 7
        }
        // 收集表
        if (item.type == 9) {
          item.cur_icon = '/static/file/form.png'
          item.name = item.title
          item.type2 = 9
        }
        // 电商素材--页面素材
        if (item.type == 12) {
          console.log(item, '页面素材')
          item.cur_icon = '/static/file/shop.png'
          item.name = item.page_name
          item.type2 = 8
        }
        result.push(item)
      })
    }
    return result
  }
  // 数据转换
  const changeInfo = () => {
    fileList.value.forEach((item: any) => {
      if (item.type != 1) {
        if (item.is_local) {
          if (item.type == 6) {
            props.welContent.local_link.push({
              link_title: item.title,
              link_url: item.link_url,
              link_decs: item.link_desc,
              link_share_image: item.cover_image_url
            })
          } else {
            props.welContent.local_content.push({
              code: item.code,
              type: item.type2
            })
          }
        } else {
          props.welContent.attachment.push({
            media_content_id: item.id,
            type: item.type2
          })
        }
      }
    })
  }
  // 弹框配置项
  const appDialog = reactive({
    visible: false,
    title: '选择已有欢迎语',
    width: '1200px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
  })
  //获取文件类型
  const url = (data: any) => {
    let fileTYpe = {
      '.pdf': '/static/file/pdf.png',
      '.doc': '/static/file/doc.png',
      '.docx': '/static/file/doc.png',
      '.xls': '/static/file/xls.png',
      '.xlsx': '/static/file/xls.png',
      '.ppt': '/static/file/ppt.png',
      '.pptx': '/static/file/ppt.png'
    }
    console.log(data.name, 'jingjing')
    if (data.name) {
      const last = data.name.substring(data.name.lastIndexOf('.'))
      return fileTYpe[last] || '/static/file/file.png'
    }
    // const last = data.name.substring(data.name.lastIndexOf("."));
    // return fileTYpe[last] || "/static/file/file.png";
  }
  defineExpose({ changeInfo, dispose })
  watch(
    () => props.welContent,
    (val: any) => {
      if (props.type == 'edit' || props.type == 'look') {
        fileList.value.push({ type: 1, content: val.content })
        val.attachment.forEach((item: any) => {
          item.media_file = {}
          if (item.media_file) {
            item.media_file.fromList = true
          }
          if (item.type !== 3) {
            if (item.type === 1) {
              item.media_file.cur_icon = '/static/file/pic.png'
              item.media_file.type = 2
              item.media_file.type2 = 1
              item.media_file.id = item.id
              item.media_file.content_id = item.content_id
              // item.media_file.user_name = item.media_file.name;
            }
            if (item.type === 2) {
              item.media_file.cur_icon = '/static/file/mov.png'
              item.media_file.thumbnail_url = `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
              item.media_file.type = 4
              item.media_file.type2 = 2
              item.media_file.id = item.id
              item.media_file.content_id = item.content_id

              // item.media_file.user_name = item.media_file.name;
            }
            if (item.type === 4) {
              item.media_file.cur_icon = '/static/file/mp3.png'
              item.media_file.type2 = 4
              item.media_file.type = 3
              item.media_file.id = item.id
              item.media_file.content_id = item.content_id

              // item.media_file.user_name = res.user_name;
            }
            if (item.type === 5) {
              let file = {
                type2: 5,
                fromList: true, // 数据来自详情
                is_local: item.content_id == 0 ? true : false,
                type: 5,
                id: item.id,
                title: item.media_file.name,
                name: item.media_file.name,
                content_id: item.content_id,
                // user_name: res.user_name,
                mediaFileInfo: {
                  size: item.media_file?.size
                },
                cur_icon: url(item.media_file)
              }
              fileList.value.push(file)
              fileList2.value.push(file)
              newArr.value.push(file)
            }
            if (item.type === 6) {
              let file = {
                fromList: true, // 数据来自详情
                type: 7,
                id: item.id,
                title: item.link_title,
                name: item.link_title,
                content_id: item.id,
                cur_icon: '/static/file/wbgg.png'
              }
              fileList.value.push(file)
              fileList2.value.push(file)
              newArr.value.push(file)
            }
            if (item.type === 7) {
              let file = {
                fromList: true, // 数据来自详情
                type: 7,
                id: item.id,
                title: item.link_title,
                name: item.link_title,
                content_id: item.id,
                cur_icon: '/static/file/shop.png'
              }
              fileList.value.push(file)
              fileList2.value.push(file)
              newArr.value.push(file)
            }
            if (item.type === 8) {
              let file = {
                fromList: true, // 数据来自详情
                type: 12,
                id: item.id,
                title: item.link_title,
                name: item.link_title,
                content_id: item.id,
                cur_icon: '/static/file/shop.png'
              }
              fileList.value.push(file)
              fileList2.value.push(file)
              newArr.value.push(file)
            }
            if (item.type === 9) {
              let file = {
                fromList: true, // 数据来自详情
                type: 12,
                id: item.id,
                title: item.link_title,
                name: item.link_title,
                content_id: item.id,
                cur_icon: '/static/file/form.png'
              }
              fileList.value.push(file)
              fileList2.value.push(file)
              newArr.value.push(file)
            }
            if (item.type != 5 && item.type != 7 && item.type != 8 && item.type != 12 && item.type != 9 && item.type != 6) {
              fileList.value.push(item.media_file)
              fileList2.value.push(item.media_file)
              newArr.value.push(item.media_file)
            }
          } else {
            let link = {
              fromList: true,
              name: item.link_title,
              is_local: item.content_id == 0 ? true : false,
              title: item.content_id == 0 ? (item.link_title ? item.link_title : '') : item.media_content_link ? item.media_content_link.link_title : '',
              cover_image_url: item.content_id == 0 ? item.link_share_image : item.media_content_link?.cover_image_url,
              link_decs: item.content_id == 0 ? item.link_decs : item.media_content_link ? item.media_content_link.content : '',
              cur_icon: '/static/file/link.png',
              link_url: item.content_id == 0 ? item.link_url : item.media_content_link ? item.media_content_link.ref_url : '',
              type: 6,
              type2: 3,
              id: item.id,
              content_id: item.content_id
            }
            fileList.value.push(link)
            fileList2.value.push(link)
            newArr.value.push(link)
          }
        })
      }
    },
    { immediate: true }
  )
  onBeforeUnmount(() => {
    bus.off('dispose', dispose)
  })
</script>

<style lang="scss" scoped>
  .pop_select_box {
    height: 84px;

    .upload_btn {
      margin-top: 8px;
    }

    .upload_pop {
      background: #ffffff;
      border-radius: 12px;
      // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .item_pop {
        width: 60px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;

        .item_pop_icon {
          width: 40px;
        }

        .item_pop_name {
          font-size: 14px;
          margin-top: 2px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1918;
        }
      }
    }
  }

  .welcome {
    width: 100%;

    .el-form-item {
      margin-bottom: 0px;
    }

    .create {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20px;

      .list_item {
        padding-left: 18px;
        padding-right: 132px;

        //   border-right: 1px solid #eaeaea;
        .item_title {
          font-size: 14px;
          line-height: 18px;
          font-family: STHeitiSC-Medium, STHeitiSC;
          font-weight: 500;
          color: #33302d;
          margin-bottom: 16px;

          .title_icon {
            display: block;
            height: 18px;
            width: 3px;
            background: #ff6b00;
            float: left;
            margin-left: -15px;
          }
        }

        .item_con_input {
          width: 470px;
        }

        .item_con {
          .radio_group {
            margin-right: 15px;
          }

          .cus_type_0 {
            margin-top: 20px;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;

            span {
              color: #ff6b00;
            }
          }

          .form_cus_type {
            margin-top: 5px;

            .el-form-item__content {
              .form_item_input {
                .el-input__inner {
                  width: 253px !important;
                }
              }
            }
          }

          .input_textarea {
            width: 100%;

            :deep(.el-textarea__inner) {
              height: 170px;
              background: #f8f8f8;
              border: 0;
              box-shadow: none;
              border-bottom: 1px solid #eaeaea;
              padding: 5px 0;
            }
          }
        }

        .item_message_box {
          background: #f8f8f8;
          border: 1px solid #eaeaea;
          border-radius: 4px;
          width: 580px;
          height: 380px;
          position: relative;

          .simple_fn {
            margin-top: 5px;

            display: flex;
            align-items: center;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            padding-bottom: 6px;
            border-bottom: 1px solid #eaeaea;

            .cus_name {
              margin-right: 18px;
              color: #ff6b00;
              cursor: pointer;
            }

            .emoj {
              margin-left: 5px;
              cursor: pointer;
            }

            .sele_text {
              cursor: pointer;
            }
          }

          .upload_list_box {
            overflow: hidden;
            height: 135px;
          }

          .upload_list {
            .upload_item {
              margin-top: 5px;
              width: 440px;
              height: 32px;
              box-sizing: border-box;
              background: #eaeaea;
              display: flex;
              padding: 0px 10px 0px 14px;
              align-items: center;

              .file_icon {
                width: 20px;
                height: 20px;
                margin-right: 7px;
              }

              .file_name {
                width: 375px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }

              .del_icon {
                width: 10px;
                height: 10px;
                cursor: pointer;
              }
            }
          }

          .upload_btn {
            display: inline-block;
            position: relative;
            top: -25px;
            line-height: 32px;
            margin-left: 12px;
            background: #f8f8f8;
            border: 1px solid #d9d9d9;
            box-sizing: border-box;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            padding: 0 12px;
            color: #969696;
            .addIcon {
              position: absolute;
              top: 30%;
            }
            .upload_text {
              margin-left: 20px;
            }
          }

          .upload_pop {
            position: absolute;
            bottom: 50px;
            left: -20px;
            width: 360px;
            height: 84px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
            display: flex;
            align-items: center;
            justify-content: space-around;

            .item_pop {
              width: 60px;
              height: 62px;
              background: #ffffff;
              border-radius: 6px;
              border: 1px solid #f9f9f9;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              cursor: pointer;

              .item_pop_icon {
                width: 40px;
              }

              .item_pop_name {
                font-size: 14px;
                margin-top: 2px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #1a1918;
              }
            }

            &::after {
              content: '';
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translate(-50%);
              width: 0;
              height: 0;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-top: 10px solid #fff;
            }
          }

          .emoj_box {
            width: 270px;
            position: absolute;
            top: -40px;
          }
        }
      }

      .prev_box {
        flex: 1;

        .phone_con {
          position: relative;
          margin: 80px auto;
          width: 244px;
          height: 495px;
          box-sizing: border-box;
          border-radius: 36px;
          border: 9px solid #eef5fe;
          background: url('@/assets/image/channel/phone_bg.png');
          background-size: cover;

          .phone-title {
            position: absolute;
            top: -40px;
            left: 75px;
          }

          .phone_List {
            width: 100%;
            box-sizing: border-box;
            position: absolute;
            top: 48px;
            height: 380px;
            bottom: 48px;
            padding: 7px 10px;
          }
        }
      }
    }

    .already {
      color: #ff6b00;
      width: 120px;
      cursor: pointer;
      line-height: 36px;
      text-align: center;
      border: 1px solid #ff6b00;
      border-radius: 4px 4px 4px 4px;
    }

    .timeTitle {
      display: flex;
      align-items: center;
      background: #fffaf9;
      width: 580px;
      line-height: 40px;
      padding: 0 20px;

      &_icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff6b00;
        margin-right: 10px;
      }
    }
  }

  .formTime {
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #eaeaea;

    .form_week {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .del_week_icon {
        width: 17px;
        height: 16px;
        margin-top: -12px;
        background: url('@/assets/image/LiveCode/del_icon.png') center/100% no-repeat;
      }

      .selectTime {
        :deep .el-checkbox {
          margin-right: 10px;
        }
      }
    }

    .block {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .time_border {
        width: 14px;
        margin: 0 13px;
        border-top: 1px solid #969696;
      }

      .del_time {
        width: 17px;
        height: 16px;
        margin-left: 10px;
        background: url('@/assets/image/LiveCode/del_icon.png') center/100% no-repeat;
      }
    }

    :deep(.el-textarea__inner) {
      border: none;
      box-shadow: none;
      background: #fbfbfb;
    }

    :deep .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 110px;
    }

    :deep .el-input--prefix .el-input__inner {
      width: 110px;
      padding: 0px 12px;
    }
  }

  .selectWel {
    margin: 10px 0;
  }

  .table_header_title {
    height: 60px;

    th.el-table__cell {
      background: #f9f9f9;
      padding: 10px 0;
    }
  }

  .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 240px;
  }
</style>
